<script setup>
import { ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  showBack: {
    type: Boolean,
    default: true
  },
  showHome: {
    type: Boolean,
    default: false
  },
  bgColor: {
    type: String,
    default: '#1d4ed8'
  },
  textColor: {
    type: String,
    default: '#ffffff'
  }
})

const emit = defineEmits(['back'])

const statusBarHeight = ref(0)

// 获取状态栏高度
uni.getSystemInfo({
  success: (res) => {
    statusBarHeight.value = res.statusBarHeight
  }
})

const goBack = () => {
  emit('back')
  uni.navigateBack({
    delta: 1
  })
}

const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>

<template>
  <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: bgColor }">
    <view class="nav-content">
      <view class="left">
        <view v-if="showBack" class="back-btn" @tap="goBack">
       <!--   <image src="/static/icons/arrow-left.png" mode="aspectFit" :style="{ filter: textColor === '#ffffff' ? '' : 'invert(1)' }" /> -->
		   <image src="/static/icons/arrow_left.png" mode="aspectFit"  style="width: 180rpx; height: 180rpx"/>
        </view>
        <view v-if="showHome" class="home-btn" @tap="goHome">
			紫儿
          <image src="/static/icons/home.png" mode="aspectFit" :style="{ filter: textColor === '#ffffff' ? '' : 'invert(1)' }" />
        </view>
      </view>
      <view class="title" :style="{ color: textColor }">{{ title }}</view>
      <view class="right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<style scoped>
.nav-bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  
}

.nav-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  position: relative;
}

.left {
  display: flex;
  align-items: center;
  position: absolute;
  left: 32rpx;

  top: 0;
  height: 100%;
  z-index: 1;
}

.back-btn, .home-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn image, .home-btn image {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  flex: 1;
  text-align: center;
  margin: 0 32rpx;
  position: relative;
  z-index: 0;
}

.right {
  min-width: 64rpx;
  position: absolute;
  right: 32rpx;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
}
</style>